<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>海学达-海外留学申请</title>
    <link rel="stylesheet" href="../css/layui.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body>
    <div class="layui-carousel" id="test1" lay-filter="test1">
        <div carousel-item="">
            <div class="widths" style="background:url(../images/banner1.jpg)">
            </div>
            <div class="widths" style="background:url(../images/banner2.jpg)">
            </div>
            <div class="widths" style="background:url(../images/banner3.jpg)">
            </div>
            <div class="widths" style="background:url(../images/banner4.jpg)">
            </div>

        </div>
    </div>
    <div style="padding:0px 0px 12px 0px;background-color: #f9f9f9">

        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <img style="width: 100%;margin:12px 0px" src="../images/tt1.png" alt="">
        </div>
        <div class="layui-row">
            <h2 class="mainTitle">团队概览 <i class="layui-icon layui-icon-down"
                    style="font-size: 18px; color: #ae8989;"></i></h2>
            <img style="width: 94%;margin: 12px auto;display:block;" src="../images/tt11.png" alt="">
            <h2 class="mainTitle">学历概览 <i class="layui-icon layui-icon-down"
                    style="font-size: 18px; color: #ae8989;"></i></h2>
            <div class="wrapper" style="margin: 12px 0px 18px 0px; ">
                <ul>
                    <li>
                        <svg class="arc" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                            <path id="arc" fill="none" d="M 49.99 10.00 A 40.00 40.00 0 1 0 50.00 10.00" />
                            <path id="graph" style="--val: 100;" fill="none"
                                d="M 49.99 10.00 A 40.00 40.00 0 1 0 50.00 10.00" />
                            <text x="36" y="55" class="heavy">100%</text>
                        </svg>
                        <h3>本科学历</h3>
                    </li>
                    <li>
                        <svg class="arc" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                            <path id="arc" fill="none" d="M 49.99 10.00 A 40.00 40.00 0 1 0 50.00 10.00" />
                            <path id="graph" style="--val: 87;" fill="none"
                                d="M 49.99 10.00 A 40.00 40.00 0 1 0 50.00 10.00" />
                            <text x="36" y="55" class="heavy">87%</text>
                        </svg>
                        <h3>研究生学历</h3>
                    </li>
                    <li>
                        <svg class="arc" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                            <path id="arc" fill="none" d="M 49.99 10.00 A 40.00 40.00 0 1 0 50.00 10.00" />
                            <path id="graph" style="--val: 53;" fill="none"
                                d="M 49.99 10.00 A 40.00 40.00 0 1 0 50.00 10.00" />
                            <text x="36" y="55" class="heavy">53%</text>
                        </svg>
                        <h3>博士学历</h3>
                    </li>
                </ul>
            </div>


            <h2 class="mainTitle">教育概览 <i class="layui-icon layui-icon-down"
                    style="font-size: 18px; color: #ae8989;"></i></h2>
            <img style="width: 94%;margin: 12px auto;display:block;" src="../images/tt12.png" alt="">


        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <img style="width: 100%;margin:12px 0px" src="../images/tt2.png" alt="">
        </div>
        <div class="layui-row">
            <img style="width: 94%;margin: 12px auto;display:block;" src="../images/tt21.png" alt="">
            <div class="lines"
                style="width:94%;margin: 24px auto 12px auto;display: flex;align-items: center;justify-content: flex-start">
                <span>满意度</span>
                <div>
                    <div id="laile">
                    </div>
                </div>
            </div>
            <img style="width: 94%;margin: 12px auto;display:block;" src="../images/tt23.png" alt="">
        </div>

        <div style="background-color: #ffffff;margin-top: 12px;padding-top: 12px;">
            <img style="width: 100%;margin:12px 0px" src="../images/tt3.png" alt="">
            <ul class="flexrow" style="height: auto;width:96%;margin:0 auto;">
                <li style="flex:1"><img style="width: 100%;height:auto" src="../images/source.jpg" alt=""></li>
            </ul>
        </div>

    </div>


</body>
<script src="../layui.all.js"></script>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/index.js"></script>
<script>
    //adden
    let text = 0.0;
    $(window).scroll(function (event) {
        var winPos = $(window).scrollTop();
        if (winPos > 200) {
            $(".wrapper").addClass("adden")
        }else{
            $(".wrapper").removeClass("adden")
        }
        if (winPos > 600) {
            $("#laile").css({ width: "99.7%" });
            var t = setInterval(function () {
                text += 1;
                if (text > 99.6) {
                    $("#laile").text("99.7%");
                    clearInterval(t)
                } else {
                    $("#laile").text(text + "%");
                }
            }, 20)

        }else{
            $("#laile").css({ width: "0px" });
            var t = setInterval(function () {
                text -= 1;
                if (text < 1) {
                    $("#laile").text("0%");
                    clearInterval(t)
                } else {
                    $("#laile").text(text + "%");
                }
            }, 20)

        }
    });

</script>

</html>